﻿<!doctype html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		<meta content="email=no" name="format-detection">
		<title>城市选择控件</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				-webkit-appearance: none; //去掉浏览器默认样式
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
				-webkit-touch-callout: none;
				box-sizing: border-box;
			}
			
			html,
			body {
				margin: 0 auto;
				width: 100%;
				min-height: 100%;
				overflow-x: hidden;
				-webkit-user-select: none;
			}
			
			body {
				font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
				-webkit-text-size-adjust: 100%; //关闭自动调整字体
				-webkit-overflow-scrolling: touch;
				overflow-scrolling: touch;
			}
			
			input {
				width: 90%;
				height: 40px;
				font-size: 18px;
				border: 1px solid #b72f20;
				border-radius: 5px;
				margin: 20px 5% 0 5%;
				padding: 5px;
			}
			
			h1 {
				background-color: #b72f20;
				color: #fff;
				font-size: 25px;
				text-align: center;
				padding: 10px;
			}
		</style>
		<link rel="stylesheet" href="css/LArea.css">
	</head>

	<body>
		<div>

			<div class="content-block">
				<input id="demo1" type="text" readonly="" placeholder="城市选择特效" value="广东省-深圳市-南山区" />
				<input id="value1" type="hidden" value="20,234,504" />
			</div>

		</div>
		<script src="js/LArea.js"></script>
		<script>
			const LAreaData = [
			{
    "id": "15",
    "name": "江西省",
    "child": [{
        "id": "161",
        "name": "南昌市",
        "child": [{
            "id": "3543",
            "name": "东湖区  "
        },
        {
            "id": "5627",
            "name": "红谷滩新区"
        },
        {
            "id": "5626",
            "name": "南昌高新技术开发区"
        },
        {
            "id": "3551",
            "name": "进贤县 "
        },
        {
            "id": "3550",
            "name": "安义县 "
        },
        {
            "id": "3549",
            "name": "新建县 ",
            "child": [{
                "id": "5631",
                "name": "长陵镇"
            },
            {
                "id": "5632",
                "name": "昌北经济技术开发区"
            },
            {
                "id": "5633",
                "name": "蛟桥镇"
            }]
        },
        {
            "id": "3548",
            "name": "南昌县 ",
            "child": [{
                "id": "5629",
                "name": "小兰经济开发区"
            },
            {
                "id": "5630",
                "name": "连塘镇"
            }]
        },
        {
            "id": "3547",
            "name": "青山湖区 "
        },
        {
            "id": "3546",
            "name": "湾里区 "
        },
        {
            "id": "3545",
            "name": "青云谱区 "
        },
        {
            "id": "3544",
            "name": "西湖区 "
        },
        {
            "id": "5628",
            "name": "红角洲区"
        }]
    },
    {
        "id": "170",
        "name": "抚州市",
        "child": [{
            "id": "3619",
            "name": "临川区 "
        },
        {
            "id": "3628",
            "name": "东乡县 "
        },
        {
            "id": "3627",
            "name": "资溪县 "
        },
        {
            "id": "3626",
            "name": "金溪县 "
        },
        {
            "id": "3625",
            "name": "宜黄县 "
        },
        {
            "id": "3624",
            "name": "乐安县 "
        },
        {
            "id": "3623",
            "name": "崇仁县 "
        },
        {
            "id": "3622",
            "name": "南丰县 "
        },
        {
            "id": "3621",
            "name": "黎川县 "
        },
        {
            "id": "3620",
            "name": "南城县 "
        },
        {
            "id": "3629",
            "name": "广昌县 "
        }]
    },
    {
        "id": "169",
        "name": "宜春市",
        "child": [{
            "id": "3609",
            "name": "袁州区 "
        },
        {
            "id": "3618",
            "name": "高安市 "
        },
        {
            "id": "3617",
            "name": "樟树市 "
        },
        {
            "id": "3616",
            "name": "丰城市 "
        },
        {
            "id": "3615",
            "name": "铜鼓县 "
        },
        {
            "id": "3614",
            "name": "靖安县 "
        },
        {
            "id": "3613",
            "name": "宜丰县 "
        },
        {
            "id": "3612",
            "name": "上高县 "
        },
        {
            "id": "3611",
            "name": "万载县 "
        },
        {
            "id": "3610",
            "name": "奉新县 "
        },
        {
            "id": "5637",
            "name": "马王塘经济开发区 "
        }]
    },
    {
        "id": "168",
        "name": "吉安市",
        "child": [{
            "id": "3596",
            "name": "吉州区 "
        },
        {
            "id": "3607",
            "name": "永新县 "
        },
        {
            "id": "3606",
            "name": "安福县 "
        },
        {
            "id": "3605",
            "name": "万安县 "
        },
        {
            "id": "3604",
            "name": "遂川县 "
        },
        {
            "id": "3603",
            "name": "泰和县 "
        },
        {
            "id": "3602",
            "name": "永丰县 "
        },
        {
            "id": "3601",
            "name": "新干县 "
        },
        {
            "id": "3600",
            "name": "峡江县 "
        },
        {
            "id": "3599",
            "name": "吉水县 "
        },
        {
            "id": "3598",
            "name": "吉安县 "
        },
        {
            "id": "3597",
            "name": "青原区 "
        },
        {
            "id": "3608",
            "name": "井冈山市 "
        }]
    },
    {
        "id": "167",
        "name": "赣州市",
        "child": [{
            "id": "3578",
            "name": "章贡区  "
        },
        {
            "id": "3594",
            "name": "瑞金市 "
        },
        {
            "id": "3593",
            "name": "石城县 "
        },
        {
            "id": "3592",
            "name": "寻乌县 "
        },
        {
            "id": "3591",
            "name": "会昌县 "
        },
        {
            "id": "3590",
            "name": "兴国县 "
        },
        {
            "id": "3589",
            "name": "于都县 "
        },
        {
            "id": "3588",
            "name": "宁都县 "
        },
        {
            "id": "3587",
            "name": "全南县 "
        },
        {
            "id": "3586",
            "name": "定南县 "
        },
        {
            "id": "3585",
            "name": "龙南县 "
        },
        {
            "id": "3584",
            "name": "安远县 "
        },
        {
            "id": "3583",
            "name": "崇义县 "
        },
        {
            "id": "3582",
            "name": "上犹县 "
        },
        {
            "id": "3581",
            "name": "大余县 "
        },
        {
            "id": "3580",
            "name": "信丰县 "
        },
        {
            "id": "3579",
            "name": "赣县 "
        },
        {
            "id": "3595",
            "name": "南康市 "
        }]
    },
    {
        "id": "166",
        "name": "鹰潭市",
        "child": [{
            "id": "3575",
            "name": "月湖区 "
        },
        {
            "id": "3576",
            "name": "余江县 "
        },
        {
            "id": "3577",
            "name": "贵溪市 "
        }]
    },
    {
        "id": "165",
        "name": "新余市",
        "child": [{
            "id": "3573",
            "name": "渝水区 "
        },
        {
            "id": "3574",
            "name": "分宜县 "
        },
        {
            "id": "5636",
            "name": "高新经济技术开发区"
        }]
    },
    {
        "id": "164",
        "name": "九江市",
        "child": [{
            "id": "3561",
            "name": "庐山区 "
        },
        {
            "id": "5634",
            "name": "九江经济开发区"
        },
        {
            "id": "3572",
            "name": "瑞昌市 "
        },
        {
            "id": "3571",
            "name": "彭泽县 "
        },
        {
            "id": "3570",
            "name": "湖口县 "
        },
        {
            "id": "3569",
            "name": "都昌县 "
        },
        {
            "id": "3568",
            "name": "星子县  "
        },
        {
            "id": "3567",
            "name": "德安县 "
        },
        {
            "id": "3566",
            "name": "永修县 "
        },
        {
            "id": "3565",
            "name": "修水县 "
        },
        {
            "id": "3564",
            "name": "武宁县 "
        },
        {
            "id": "3563",
            "name": "九江县 "
        },
        {
            "id": "3562",
            "name": "浔阳区 "
        },
        {
            "id": "5635",
            "name": "共青开放开发区"
        }]
    },
    {
        "id": "163",
        "name": "萍乡市",
        "child": [{
            "id": "3556",
            "name": "安源区 "
        },
        {
            "id": "3557",
            "name": "湘东区 "
        },
        {
            "id": "3558",
            "name": "莲花县 "
        },
        {
            "id": "3559",
            "name": "上栗县 "
        },
        {
            "id": "3560",
            "name": "芦溪县 "
        }]
    },
    {
        "id": "162",
        "name": "景德镇市",
        "child": [{
            "id": "3552",
            "name": "昌江区 "
        },
        {
            "id": "3553",
            "name": "珠山区 "
        },
        {
            "id": "3554",
            "name": "浮梁县 "
        },
        {
            "id": "3555",
            "name": "乐平市 "
        }]
    },
    {
        "id": "171",
        "name": "上饶市",
        "child": [{
            "id": "3630",
            "name": "信州区 "
        },
        {
            "id": "3641",
            "name": "德兴市 "
        },
        {
            "id": "3640",
            "name": "婺源县 "
        },
        {
            "id": "3639",
            "name": "万年县 "
        },
        {
            "id": "3638",
            "name": "鄱阳县 "
        },
        {
            "id": "3637",
            "name": "余干县 "
        },
        {
            "id": "3636",
            "name": "弋阳县 "
        },
        {
            "id": "3635",
            "name": "横峰县 "
        },
        {
            "id": "3634",
            "name": "铅山县 "
        },
        {
            "id": "3633",
            "name": "玉山县 "
        },
        {
            "id": "3632",
            "name": "广丰县 ",
            "child": [{
                "id": "5641",
                "name": "县城"
            }]
        },
        {
            "id": "3631",
            "name": "上饶县 ",
            "child": [{
                "id": "5639",
                "name": "旭日镇"
            },
            {
                "id": "5640",
                "name": "上饶县工业园 "
            }]
        },
        {
            "id": "5638",
            "name": "上饶经济技术开发区"
        }]
    }]
}
			
			
			];

			var area1 = new LArea();
			area1.init({
				'trigger': '#demo1', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
				'valueTo': '#value1', //选择完毕后id属性输出到该位置
				'keys': {
					id: 'id',
					name: 'name'
				}, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
				'type': 1, //数据源类型
				'data': LAreaData, //数据源
				'dataFormat': '-'
			});
			area1.value = [1, 13, 3]; //控制初始位置，注意：该方法并不会影响到input的value

			//  var area2 = new LArea();
			//  area2.init({
			//      'trigger': '#demo2',
			//      'valueTo': '#value2',
			//      'keys': {
			//          id: 'value',
			//          name: 'text'
			//      },
			//      'type': 2,
			//      'data': [provs_data, citys_data, dists_data]
			//  });
		</script>
	</body>

</html>